<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<link href="../westcss/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../westcss/components.css" rel="stylesheet" id="style_components" type="text/css" />
<script src="../westjs/jquery.min.js"></script>
<script src="../westjs/bootstrap.min.js" type="text/javascript"></script>
<script src="../westjs/jquery-ui-custom.min.js"></script>
<script src="../westjs/echarts.min.js"></script>
<script src="../westjs/world.js"></script>
<!--添加全局申请ip-->
    <script src="../gobal_ip/gobal_ip.js" type="text/javascript"></script>
<link rel="stylesheet" href="../westcss/layer.css">
<link rel="stylesheet" href="../westcss/font-awesome.min.css">
<!--
@文字左右滚动
-->
<style type="text/css">
.qimo8{ overflow:hidden; width:100%;}
.qimo8 .qimo {width:200%; height:18px;}
.qimo8 .qimo div{ float:left;}
.qimo8 .qimo ul{float:left; height:18px; overflow:hidden; zoom:1; }
.qimo8 .qimo ul li{float:left; line-height:15px; list-style:none;}

.shadow{  
   -webkit-box-shadow: #666 0px 0px 10px;  
   -moz-box-shadow: #666 0px 0px 10px;  
   box-shadow: #666 0px 0px 10px;  
   background: #F0F0F0;  
}  
#demoInfo{
overflow:hidden;
height:48px;
width:240px;
position:relative;
}
#demo1_info{
height:auto;
text-align:left;
}
#demo2_info{
height:auto;
text-align:left;
}
#demo1_info li{
list-style-type:none;
height:22px;
text-align:left;
}
#demo2_info li{
list-style-type:none;
height:22px;
text-align:left;
}
#zcdetailId li{list-style:none;display:inline;}
</style>
</head>
<body style="background-color:#F0F0F0">
<div class="container-fluid">
	<div class="row-fluid">
		<div class="col-md-12">
			<div class="row-fluid">
			<!--
				west start
			-->
				<div class="col-md-2">
				<div class="portlet lightCustomer bordered">
				
						<div class="portlet-title">
							安全事件类别统计
						</div>
				
					<div class="row-fluid">
					
						<div class="col-md-12">
						<div class="portlet light bordered">
						<div class="portlet-title">
							<img src="../westimg/1.png" width="10%" height="3%">一级安全事件类别统计
							<div style="display:inline;position:absolute;right:5%;">
								<i class="fa fa-angle-down" style="cursor:pointer" onclick="window.open('subwest.html');"></i>
							</div>
						</div>
							<div onclick="window.open('subwest.html');" id="mainw1" style="width: 100%;height:11%;"></div>
						</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="col-md-12">
						<div class="portlet light bordered">
						<div class="portlet-title">
							<img src="../westimg/2.png" width="10%" height="3%">二级安全事件类别统计
							<div style="display:inline;position:absolute;right:5%;">
								<i class="fa fa-angle-down" style="cursor:pointer" onclick="window.open('subwest_2.html');"></i>
							</div>
						</div>
							<div onclick="window.open('subwest_2.html');" id="mainw2" style="width: 100%;height:11%;"></div>
						</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="col-md-12">
						<div class="portlet light bordered">
						<div class="portlet-title">
							<img src="../westimg/3.png" width="10%" height="3%">三级安全事件类别统计
							<div style="display:inline;position:absolute;right:5%;">
								<i class="fa fa-angle-down" style="cursor:pointer" onclick="window.open('subwest_3.html');"></i>
							</div>
						</div>
							<div onclick="window.open('subwest_3.html');" id="mainw3" style="width: 100%;height:11%;"></div>
						</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="col-md-12">
						<div class="portlet light bordered">
						<div class="portlet-title">
							<img src="../westimg/4.png" width="10%" height="3%">四级安全事件类别统计
							<div style="display:inline;position:absolute;right:5%;">
								<i class="fa fa-angle-down" style="cursor:pointer" onclick="window.open('subwest_4.html');"></i>
							</div>
						</div>
							<div onclick="window.open('subwest_4.html');" id="mainw4" style="width: 100%;height:11%;"></div>
						</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="col-md-12">
						<div class="portlet light bordered">
						<div class="portlet-title">
							<img src="../westimg/5.png" width="10%" height="3%">五级安全事件类别统计
							<div style="display:inline;position:absolute;right:5%;">
								<i class="fa fa-angle-down" style="cursor:pointer" onclick="window.open('subwest_5.html');"></i>
							</div>
						</div>
							<div onclick="window.open('subwest_5.html');" id="mainw5" style="width: 100%;height:11%;"></div>
						</div>
						</div>
					</div>
				</div>
				</div>
			<!--
				west end
			-->
			<!--
				center start
			-->
				<div class="col-md-8">
					<div class="row-fluid">
						<div class="col-md-12">
						<div id="demo" class="qimo8">
						  <div class="qimo">
							<div id="demo1">
							  <ul>
								<li>欢迎浏览资产态势感知系统！</li>
								<li>演示预警信息左右滚动</li>
								
							  </ul>
							</div>
						   <div id="demo2"></div>
						  </div>
						</div>
						</div>
					</div>
					<!--
					@模态框
					-->
					<div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel" aria-hidden="true" data-backdrop="static">
						<div class="modal-dialog" style="width: 500px;">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="demoModalLabel">资产列表</h4>
								</div>
								<div class="modal-body" style="height: 300px;">
									<div id="zcdetailId"></div>
								</div><!-- /.modal-body -->
								
							</div><!-- /.modal-content -->
						</div><!-- /.modal -->
					</div>
					<div class="row-fluid">
						<div class="col-md-12">
						<div class="portlet light bordered">
						<div class="portlet-title">
							资产态势感知
							<div style="display:inline;position:absolute;right:5%;">
								<i class="fa fa-qrcode" style="cursor:pointer" onclick="fullFunc();"></i>
							</div>
							<div style="display:inline;position:relative;left:5%;">
								<i class="fa fa-angle-down" style="cursor:pointer"></i>
							</div>
						</div>
						                       
						<!--
						<div onclick="switchTime();" style="text-align:right">
							<a href="#" onclick="fullFunc();">点击全屏</a>
						</div>
						-->
							<!--
							@信息提示测试
							-->
							<div id="demoInfo" class="shadow">
								<ul id="demo1_info">
									<li>欢迎浏览资产态势感知系统</li>
									<li>欢迎浏览资产态势感知系统</li>
									<li>欢迎浏览资产态势感知系统</li>
									<li>欢迎浏览资产态势感知系统</li>
									
								</ul>
							<div id="demo2_info"></div>
							</div>
							<div id="main" style="width: 100%;height:55%;"></div>
						</div>
						</div>
					</div>
			<!--
				south start
			-->
					<div class="row-fluid">
						<div class="col-md-12">
						
							<div class="row-fluid">
								<div class="col-md-6">
								<div class="portlet light bordered">
								<div class="portlet-title">
									实时流量统计
									<div style="display:inline;position:relative;left:5%;">
										<i class="fa fa-angle-down" style="cursor:pointer" onclick="window.open('../ljw/lltj.html');"></i>
									</div>
								</div>
									<div onclick="window.open('../ljw/lltj.html');" id="mains1" style="width: 100%;height:18%;"></div>
								</div>
								</div>
								<div class="col-md-6">
								<div class="portlet light bordered">
								<div class="portlet-title">
									按时段的流量统计
									<div style="display:inline;position:relative;left:5%;">
										<i class="fa fa-angle-down" style="cursor:pointer" onclick="window.open('../ljw/lltj.html');"></i>
									</div>
									<div style="display:inline;position:absolute;right:5%;">
										<input type="radio" checked onclick="switchTime_m();" name="mytime" value="1" /> 按分钟
										<input type="radio" onclick="switchTime_h()"  name="mytime" value="2" /> 按小时
										<input type="radio" onclick="switchTime_w();" name="mytime" value="3" /> 按周
										<input type="radio" onclick="switchTime_M();"  name="mytime" value="4" /> 按月
									</div>
								</div>
									<div onclick="window.open('../ljw/lltj.html');" id="mains2" style="width: 100%;height:18%;"></div>
								</div>
								</div>
							</div>
						</div>
						
					</div>
			<!--
				south end
			-->
				</div>
			<!--
				center end
			-->
			<!--
				east start
			-->
				<div class="col-md-2">
					<div class="row-fluid">
						<div class="col-md-12">
						<div class="portlet light bordered">
						<div class="portlet-title">
							Top10安全事件统计
							<div style="display:inline;position:absolute;right:5%;">
								<i class="fa fa-angle-down" style="cursor:pointer" onclick="window.open('../yz/top10Threat_D3.html');"></i>
							</div>
						</div>
							<div onclick="window.open('../yz/top10Threat_D3.html');" id="maine1" style="width: 100%;height:25.7%;"></div>
						</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="col-md-12">
						<div class="portlet light bordered">
						<div class="portlet-title">
							Top10攻击源IP统计
							<div style="display:inline;position:absolute;right:5%;">
								<i class="fa fa-angle-down" style="cursor:pointer" onclick="window.open('../yz/Top10att&under_att.html');"></i>
							</div>
						</div>
							<div onclick="window.open('../yz/Top10att&under_att.html');" id="maine2" style="width: 100%;height:25.7%;"></div>
						</div>
						</div>
					</div>
					<div class="row-fluid">
						<div class="col-md-12">
						<div class="portlet light bordered">
						<div class="portlet-title">
							Top10被攻击IP统计
							<div style="display:inline;position:absolute;right:5%;">
								<i class="fa fa-angle-down" style="cursor:pointer" onclick="window.open('../yz/Top10att&under_att.html');"></i>
							</div>
						</div>
							<div onclick="window.open('../yz/Top10att&under_att.html');" id="maine3" style="width: 100%;height:25.7%;"></div>
						</div>
						</div>
					</div>
				</div>
			<!--
				east end
			-->
			</div>
		</div>
	</div>
	
</div>
</body>
<script src="../westjs/layer.js"></script>
<script>
	$.ajaxSetup({
			async: false
	});
	//@full
	function fullFunc()
	{
		layer.open({
		  type: 2,
		  title: '资产态势感知',
		  shadeClose: true,
		  shade: 0.8,
		  area: ['100%', '100%'],
		  offset: 't',
		  content: 'mapfullBak.html' //iframe的url
		}); 
	}
	
	//@
	var demo = document.getElementById("demo");
	var demo1 = document.getElementById("demo1");
	var demo2 = document.getElementById("demo2");
	demo2.innerHTML=document.getElementById("demo1").innerHTML;
	function Marquee(){
		if(demo.scrollLeft-demo2.offsetWidth>=0){
			demo.scrollLeft-=demo1.offsetWidth;
		}
		else{
			demo.scrollLeft++;
		}
	}
	var myvar=setInterval(Marquee,30);
	demo.onmouseout=function (){
		myvar=setInterval(Marquee,30);
	}
	demo.onmouseover=function(){
		clearInterval(myvar);
	}
	
	//@信息提示测试
	var demoInfo=document.getElementById("demoInfo"); 
	var demo2_info=document.getElementById("demo2_info"); 
	var demo1_info=document.getElementById("demo1_info"); 
	demo2_info.innerHTML=demo1_info.innerHTML;
	function Marquee_info(){ 
		if(demoInfo.scrollTop>=demo1_info.offsetHeight){
			demoInfo.scrollTop=0; 
		}
		else{ 
			demoInfo.scrollTop=demoInfo.scrollTop+1;
		} 
	} 
	var MyMar=setInterval(Marquee_info,100) 
	demoInfo.onmouseover=function(){
		clearInterval(MyMar)
	} 
	demoInfo.onmouseout=function(){
		MyMar=setInterval(Marquee_info,100)
	} 
	
	evData_event=[];
	evData_nums=[];
/*
	$.ajax({
		url: "../subwest/data/eventType_1.json",
		async: false,//改为同步方式
		type: "GET",
	//	data: { arg: val },
		success: function (data) {
			$(data.data).each(function(index,item){
				evData_event.push(
					item.name
				);
				evData_nums.push(
					item.count				
				);
			})
		}
	});
*/
	
	$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/countbyeventtype"),function(data){
		$(data.data["1"]).each(function(index,item){
			evData_event.push(
				item.sjlx
			);
			evData_nums.push(
				item.count				
			);
		})
	});
	evData_event.reverse();
	evData_nums.reverse();
	
	evData_event_2=[];
	evData_nums_2=[];
/*
	$.ajax({
		url: "../subwest/data/eventType_2.json",
		async: false,//改为同步方式
		type: "GET",
	//	data: { arg: val },
		success: function (data) {
			$(data.data).each(function(index,item){
				evData_event_2.push(
					item.name
				);
				evData_nums_2.push(
					item.count				
				);
			})
		}
	});
*/

	$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/countbyeventtype"),function(data){
		$(data.data["2"]).each(function(index,item){
			evData_event_2.push(
				item.sjlx
			);
			evData_nums_2.push(
				item.count				
			);
		})
	});
	evData_event_2.reverse();
	evData_nums_2.reverse();
	
	evData_event_3=[];
	evData_nums_3=[];
/*
	$.ajax({
		url: "../subwest/data/eventType_3.json",
		async: false,//改为同步方式
		type: "GET",
	//	data: { arg: val },
		success: function (data) {
			$(data.data).each(function(index,item){
				evData_event_3.push(
					item.name
				);
				evData_nums_3.push(
					item.count				
				);
			})
		}
	});
*/
	$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/countbyeventtype"),function(data){
		$(data.data["3"]).each(function(index,item){
			evData_event_3.push(
				item.sjlx
			);
			evData_nums_3.push(
				item.count				
			);
		})
	});
	evData_event_3.reverse();
	evData_nums_3.reverse();
	
	evData_event_4=[];
	evData_nums_4=[];
/*
	$.ajax({
		url: "../subwest/data/eventType_4.json",
		async: false,//改为同步方式
		type: "GET",
	//	data: { arg: val },
		success: function (data) {
			$(data.data).each(function(index,item){
				evData_event_4.push(
					item.name
				);
				evData_nums_4.push(
					item.count				
				);
			})
		}
	});
*/
	$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/countbyeventtype"),function(data){
		$(data.data["4"]).each(function(index,item){
			evData_event_4.push(
				item.sjlx
			);
			evData_nums_4.push(
				item.count				
			);
		})
	});
	evData_event_4.reverse();
	evData_nums_4.reverse();
	
	evData_event_5=[];
	evData_nums_5=[];
/*
	$.ajax({
		url: "../subwest/data/eventType_5.json",
		async: false,//改为同步方式
		type: "GET",
	//	data: { arg: val },
		success: function (data) {
			$(data.data).each(function(index,item){
				evData_event_5.push(
					item.name
				);
				evData_nums_5.push(
					item.count				
				);
			})
		}
	});
*/
	$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/countbyeventtype"),function(data){
		$(data.data["5"]).each(function(index,item){
			evData_event_5.push(
				item.sjlx
			);
			evData_nums_5.push(
				item.count				
			);
		})
	});
	evData_event_5.reverse();
	evData_nums_5.reverse();
	
	evData_event_top10=[];
	evData_nums_top10=[];
/*
	$.ajax({
		url: "../subwest/data/evtop10.json",
		async: false,//改为同步方式
		type: "GET",
	//	data: { arg: val },
		success: function (data) {
			$(data.data).each(function(index,item){
				evData_event_top10.push(
					item.sjmc
				);
				evData_nums_top10.push(
					item.count				
				);
			})
		}
	});
*/
	var jsonObj={starttime:"2016-12-01 00:00:00",endtime:"2016-12-30 00:00:00"}; 
	$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/geteventtopten?param="+JSON.stringify(jsonObj)),function(data){
		$(data.data).each(function(index,item){
			evData_event_top10.push(
				item.sjmc
			);
			evData_nums_top10.push(
				item.count				
			);
		})
	});
	evData_event_top10.reverse();
	evData_nums_top10.reverse();
	
	pieData_top10_1=[];
/*
	$.ajax({
		url: "../subwest/data/pietop10_1.json",
		async: false,//改为同步方式
		type: "GET",
	//	data: { arg: val },
		success: function (data) {
			$(data.data).each(function(index,item){
				pieData_top10_1.push({
					value: item.count,
					name: item.ip
				});		
			})
		}
	});
*/
	$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/getattacksourcetopten?param="+JSON.stringify(jsonObj)),function(data){
		$(data.data).each(function(index,item){
			pieData_top10_1.push({
				value: item.count,
				name: item.ip
			});
		})
	});
	pieData_top10_1.reverse();
	
	pieData_top10_2=[];
/*
	$.ajax({
		url: "../subwest/data/pietop10_2.json",
		async: false,//改为同步方式
		type: "GET",
	//	data: { arg: val },
		success: function (data) {
			$(data.data).each(function(index,item){
				pieData_top10_2.push({
					value: item.count,
					name: item.ip
				});		
			})
		}
	});
*/
	$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/getattacktargettopten?param="+JSON.stringify(jsonObj)),function(data){
		$(data.data).each(function(index,item){
			pieData_top10_2.push({
				value: item.count,
				name: item.ip
			});
		})
	});
	pieData_top10_2.reverse();
	
	var myChartw1 = echarts.init(document.getElementById('mainw1'));
	var myChartw2 = echarts.init(document.getElementById('mainw2'));
	var myChartw3 = echarts.init(document.getElementById('mainw3'));
	var myChartw4 = echarts.init(document.getElementById('mainw4'));
	var myChartw5 = echarts.init(document.getElementById('mainw5'));
	
	var myCharte1 = echarts.init(document.getElementById('maine1'));
	var myCharte2 = echarts.init(document.getElementById('maine2'));
	var myCharte3 = echarts.init(document.getElementById('maine3'));
	
	var myChart = echarts.init(document.getElementById('main'));
	
	var myCharts1 = echarts.init(document.getElementById('mains1'));
	var myCharts2 = echarts.init(document.getElementById('mains2'));
	
	
    //@左侧图
    var optionw1 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		
		grid: {
			top:'1%',
			left: '3%',
			right: '4%',
			bottom: '0%',
			containLabel: true
		},
		xAxis: {
			type: 'value',
			boundaryGap: [0, 0.01]	
		},
		yAxis: {
			type: 'category',
			data: evData_event,
			axisLabel:{ 
				textStyle:{
					fontSize:5 
				}
			}
			
		},
		series: [
		   
			{
				name: '攻击次数',
				type: 'bar',
				data: evData_nums,
				itemStyle: {
					normal: {
						color: function(params) {
							// build a color map as your need.
							var colorList = [
								'#FA8072'
							];
							return colorList[params.dataIndex]
						}
					}
				}
			}
		]
	};
	
	var optionw2 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		
		grid: {
			top:'1%',
			left: '3%',
			right: '4%',
			bottom: '0%',
			containLabel: true
		},
		xAxis: {
			type: 'value',
			boundaryGap: [0, 0.01]
			
			
		},
		yAxis: {
			type: 'category',
			data: evData_event_2,
			axisLabel:{ 
				textStyle:{
					fontSize:5 
				}
			}
			
		},
		series: [
		   
			{
				name: '攻击次数',
				type: 'bar',
				data: evData_nums_2,
				itemStyle: {
					normal: {
						color: function(params) {
							// build a color map as your need.
							var colorList = [
								'#FF6347'
							];
							return colorList[params.dataIndex]
						}
					}
				}
			}
		]
	};
	
	var optionw3 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		
		grid: {
			top:'1%',
			left: '3%',
			right: '4%',
			bottom: '0%',
			containLabel: true
		},
		xAxis: {
			type: 'value',
			boundaryGap: [0, 0.01]
			
			
		},
		yAxis: {
			type: 'category',
			data: evData_event_3,
			axisLabel:{ 
				textStyle:{
					fontSize:5 
				}
			}
			
		},
		series: [
		   
			{
				name: '攻击次数',
				type: 'bar',
				data: evData_nums_3,
				itemStyle: {
					normal: {
						color: function(params) {
							// build a color map as your need.
							var colorList = [
								'#FF4500'
							];
							return colorList[params.dataIndex]
						}
					}
				}
			}
		]
	};
	
	var optionw4 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		
		grid: {
			top:'1%',
			left: '3%',
			right: '4%',
			bottom: '0%',
			containLabel: true
		},
		xAxis: {
			type: 'value',
			boundaryGap: [0, 0.01]
			
			
		},
		yAxis: {
			type: 'category',
			data: evData_event_4,
			axisLabel:{ 
				textStyle:{
					fontSize:5 
				}
			}
			
		},
		series: [
		   
			{
				name: '攻击次数',
				type: 'bar',
				data: evData_nums_4,
				itemStyle: {
					normal: {
						color: function(params) {
							// build a color map as your need.
							var colorList = [
								'#FF0000'
							];
							return colorList[params.dataIndex]
						}
					}
				}
			}
		]
	};
	
	var optionw5 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		
		grid: {
			top:'1%',
			left: '3%',
			right: '4%',
			bottom: '0%',
			containLabel: true
		},
		xAxis: {
			type: 'value',
			boundaryGap: [0, 0.01]
			
			
		},
		yAxis: {
			type: 'category',
			data: evData_event_5,
			axisLabel:{ 
				textStyle:{
					fontSize:5 
				}
			}
			
		},
		series: [
		   
			{
				name: '攻击次数',
				type: 'bar',
				data: evData_nums_5,
				itemStyle: {
					normal: {
						color: function(params) {
							// build a color map as your need.
							var colorList = [
								//'#D3D3D3','#C0C0C0','#A9A9A9','#808080','#FA8072','#FF6347','#FF4500','#FF0000','#B22222'
								'#B22222'
							];
							return colorList[params.dataIndex]
						}
					}
				}
			}
		]
	};
	myChartw1.setOption(optionw1);
	myChartw2.setOption(optionw2);
	myChartw3.setOption(optionw3);
	myChartw4.setOption(optionw4);
	myChartw5.setOption(optionw5);
	
	//@右侧图
	var optione1 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		
		grid: {
			top:'1%',
			left: '1%',
			right: '3%',
			bottom: '0%',
			containLabel: true
		},
		xAxis: {
			type: 'value',
			boundaryGap: [0, 0.01]
	
		},
		yAxis: {
			type: 'category',
			data: evData_event_top10,
			axisLabel:{ 
				textStyle:{
					fontSize:5 
				}
			}
		},
		
		series: [
		   
			{
				name: '攻击次数',
				type: 'bar',
				data: evData_nums_top10,
				itemStyle: {
					normal: {
						color: function(params) {
							// build a color map as your need.
							var colorList = [
								'#D3D3D3','#C0C0C0','#A9A9A9','#808080','#FA8072','#FF6347','#FF4500','#FF0000','#B22222'
							];
							return colorList[params.dataIndex]
						}
					}
				}
			}
		]
	};
	myCharte1.setOption(optione1);
	var optione2 = {
		tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b}: {c} ({d}%)"
		},
		label:{
			normal:{
				textStyle:{
					fontSize:12 
				}
			}
		},
		color:['#D3D3D3','#C0C0C0','#A9A9A9','#808080','#FA8072','#FF6347','#FF4500','#FF0000','#B22222','#8B0000'],
		//color:["#E0E0E0","#d0d0d0","#BEBEBE","#ADADAD","#9D9D9D","#8E8E8E","#7B7B7B","#6C6C6C","#5B5B5B","#4F4F4F"],
		series: 
			
			{
				name:'危害程度',
				type:'pie',
				center: ['47%', '57%'],
				radius: ['40%', '55%'],

				data:pieData_top10_1,
				/*[
					{value:33, name:'10.171.1.1'},
					{value:60, name:'10.171.1.2'},
					{value:84, name:'10.171.1.3'},
					{value:135, name:'10.171.1.4'},
					{value:148, name:'10.171.1.5'},
					{value:151, name:'10.171.1.6'},
					{value:171, name:'10.171.1.7'},
					{value:192, name:'10.171.1.8'},
					{value:247, name:'10.171.1.9'},
					{value:282, name:'10.171.1.10'}
				]*/
			}
		
	};
	myCharte2.setOption(optione2);
	
	var optione3 = {
		tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b}: {c} ({d}%)"
		},
		color:['#D3D3D3','#C0C0C0','#A9A9A9','#808080','#FA8072','#FF6347','#FF4500','#FF0000','#B22222','#8B0000'],
		series: 
			
			{
				name:'风险程度',
				type:'pie',
				radius: ['40%', '55%'],

				data:pieData_top10_2,
				/*[
					{value:33, name:'210.171.1.1'},
					{value:60, name:'210.171.1.2'},
					{value:84, name:'210.171.1.3'},
					{value:135, name:'210.171.1.4'},
					{value:148, name:'210.171.1.5'},
					{value:151, name:'210.171.1.6'},
					{value:171, name:'210.171.1.7'},
					{value:192, name:'210.171.1.8'},
					{value:247, name:'210.171.1.9'},
					{value:282, name:'210.171.1.10'}
				]*/
			}
		
	};
	myCharte3.setOption(optione3);
	
	//@中间图
/*
	var geoCoordMap1 = {		
		//'数据中心A':[121.48,31.22],		
		//'数据中心B':[-97,38],		
		'数据中心C':[-55,-10],		
		//'数据中心D':[100,60],		
		//'数据中心E':[42,43.5],
		'广州': [113.5107,23.2196]
	};
	var geoCoordMap2 = {		
		'数据中心A':[121.48,31.22],		
		//'数据中心B':[-97,38],		
		//'数据中心C':[-55,-10],		
		//'数据中心D':[100,60],		
		//'数据中心E':[42,43.5],
		'伦敦': [-0.127758,51.507351]
	};
	var geoCoordMap3 = {		
		//'数据中心A':[121.48,31.22],		
		//'数据中心B':[-97,38],		
		//'数据中心C':[-55,-10],		
		'数据中心D':[100,60],		
		//'数据中心E':[42,43.5],
		'伦敦': [-0.127758,51.507351]
	};
	var geoCoordMap4 = {		
		//'数据中心A':[121.48,31.22],		
		'数据中心B':[-97,38],		
		//'数据中心C':[-55,-10],		
		//'数据中心D':[100,60],		
		//'数据中心E':[42,43.5],
		'广州': [113.5107,23.2196]
	};
	var geoCoordMap5 = {		
		//'数据中心A':[121.48,31.22],		
		//'数据中心B':[-97,38],		
		//'数据中心C':[-55,-10],		
		//'数据中心D':[100,60],		
		'数据中心E':[42,43.5],
		'伦敦': [-0.127758,51.507351]
	};

	var GZData1 = [
		//[{name:'广州'},{name:'数据中心A',value:19}],
		//[{name:'广州'},{name:'数据中心B',value:29}],
		[{name:'广州'},{name:'数据中心C',value:180}]
		//[{name:'广州'},{name:'数据中心D',value:49}],
		//[{name:'广州'},{name:'数据中心E',value:10}]
	];
	var GZData2 = [
		[{name:'伦敦'},{name:'数据中心A',value:29}]
		//[{name:'广州'},{name:'数据中心B',value:29}],
		//[{name:'广州'},{name:'数据中心C',value:80}],
		//[{name:'广州'},{name:'数据中心D',value:49}],
		//[{name:'广州'},{name:'数据中心E',value:10}]
	];
	var GZData3 = [
		//[{name:'伦敦'},{name:'数据中心A',value:19}],
		//[{name:'广州'},{name:'数据中心B',value:29}],
		//[{name:'广州'},{name:'数据中心C',value:80}],
		[{name:'伦敦'},{name:'数据中心D',value:149}]
		//[{name:'广州'},{name:'数据中心E',value:10}]
	];
	var GZData4 = [
		//[{name:'伦敦'},{name:'数据中心A',value:19}],
		[{name:'广州'},{name:'数据中心B',value:129}]
		//[{name:'广州'},{name:'数据中心C',value:80}],
		//[{name:'伦敦'},{name:'数据中心D',value:49}]
		//[{name:'广州'},{name:'数据中心E',value:10}]
	];
	var GZData5 = [
		//[{name:'伦敦'},{name:'数据中心A',value:19}],
		//[{name:'广州'},{name:'数据中心B',value:29}],
		//[{name:'广州'},{name:'数据中心C',value:80}],
		//[{name:'伦敦'},{name:'数据中心D',value:49}]
		[{name:'伦敦'},{name:'数据中心E',value:310}]
	];

	var convertData1 = function (data) {
		var res = [];
		for (var i = 0; i < data.length; i++) {
			var dataItem = data[i];
			var fromCoord = geoCoordMap1[dataItem[0].name];
			var toCoord = geoCoordMap1[dataItem[1].name];
			if (fromCoord && toCoord) {
				res.push({
					fromName: dataItem[0].name,
					toName: dataItem[1].name,
					coords: [fromCoord, toCoord]
				});
			}
		}
		return res;
	};
	var convertData2 = function (data) {
		var res = [];
		for (var i = 0; i < data.length; i++) {
			var dataItem = data[i];
			var fromCoord = geoCoordMap2[dataItem[0].name];
			var toCoord = geoCoordMap2[dataItem[1].name];
			if (fromCoord && toCoord) {
				res.push({
					fromName: dataItem[0].name,
					toName: dataItem[1].name,
					coords: [fromCoord, toCoord]
				});
			}
		}
		return res;
	};
	var convertData3 = function (data) {
		var res = [];
		for (var i = 0; i < data.length; i++) {
			var dataItem = data[i];
			var fromCoord = geoCoordMap3[dataItem[0].name];
			var toCoord = geoCoordMap3[dataItem[1].name];
			if (fromCoord && toCoord) {
				res.push({
					fromName: dataItem[0].name,
					toName: dataItem[1].name,
					coords: [fromCoord, toCoord]
				});
			}
		}
		return res;
	};
	var convertData4 = function (data) {
		var res = [];
		for (var i = 0; i < data.length; i++) {
			var dataItem = data[i];
			var fromCoord = geoCoordMap4[dataItem[0].name];
			var toCoord = geoCoordMap4[dataItem[1].name];
			if (fromCoord && toCoord) {
				res.push({
					fromName: dataItem[0].name,
					toName: dataItem[1].name,
					coords: [fromCoord, toCoord]
				});
			}
		}
		return res;
	};
	var convertData5 = function (data) {
		var res = [];
		for (var i = 0; i < data.length; i++) {
			var dataItem = data[i];
			var fromCoord = geoCoordMap5[dataItem[0].name];
			var toCoord = geoCoordMap5[dataItem[1].name];
			if (fromCoord && toCoord) {
				res.push({
					fromName: dataItem[0].name,
					toName: dataItem[1].name,
					coords: [fromCoord, toCoord]
				});
			}
		}
		return res;
	};

	var series = [];
	[['广州', GZData1]].forEach(function (item, i) {
		series.push(
		{
			type: 'lines',
			zlevel: 1,
			effect: {
				show: true,
				period: 6,
				trailLength: 0.9,
				color: 'blue',
				symbolSize: 5
			},
			lineStyle: {
				normal: {
					color: "red",
					width: 0,
					curveness: 0.2
				}
			},
			data: convertData1(item[1])
		},
		{
			type: 'lines',
			zlevel: 2,
			effect: {
				show: true,
				period: 6,
				trailLength: 0
				
			},
			lineStyle: {
				normal: {
					color: "red",
					width: 1,
					opacity: 0.7,
					curveness: 0.2
				}
			},
			data: convertData1(item[1])
		},
		
		{
			type: 'effectScatter',
			coordinateSystem: 'geo',
			zlevel: 2,
			rippleEffect: {
				brushType: 'stroke'
			},
			label: {
				normal: {
					show: true,
					position: 'right',
					formatter: '{b}'
				}
			},
			symbol:'circle',
			symbolSize: function (val) {
				return val[2] / 8;
			},
			itemStyle: {
				normal: {
					color: "#BF0060"
				}
			},
			data: item[1].map(function (dataItem) {
				return {
					name: dataItem[1].name,
					value: geoCoordMap1[dataItem[1].name].concat([dataItem[1].value])
				};
			})
		});
		
	});
	[['伦敦', GZData2]].forEach(function (item, i) {
		series.push(
		{
			type: 'lines',
			zlevel: 1,
			effect: {
				show: true,
				period: 6,
				trailLength: 0.9,
				color: 'blue',
				symbolSize: 5
			},
			lineStyle: {
				normal: {
					color: "red",
					width: 0,
					curveness: 0.2
				}
			},
			data: convertData2(item[1])
		},
		{
			type: 'lines',
			zlevel: 2,
			effect: {
				show: true,
				period: 6,
				trailLength: 0
				
			},
			lineStyle: {
				normal: {
					color: "red",
					width: 1,
					opacity: 0.7,
					curveness: 0.2
				}
			},
			data: convertData2(item[1])
		},
		{
			type: 'effectScatter',
			coordinateSystem: 'geo',
			zlevel: 2,
			rippleEffect: {
				brushType: 'stroke'
			},
			label: {
				normal: {
					show: true,
					position: 'right',
					formatter: '{b}'
				}
			},
			symbol:'rect',
			symbolSize: function (val) {
				return val[2] / 8;
			},
			itemStyle: {
				normal: {
					color: "#8600FF"
				}
			},
			data: item[1].map(function (dataItem) {
				return {
					name: dataItem[1].name,
					value: geoCoordMap2[dataItem[1].name].concat([dataItem[1].value])
				};
			})
		});
		
	});
	[['伦敦', GZData3]].forEach(function (item, i) {
		series.push(
		{
			type: 'lines',
			zlevel: 1,
			effect: {
				show: true,
				period: 6,
				trailLength: 0.9,
				color: 'blue',
				symbolSize: 5
			},
			lineStyle: {
				normal: {
					color: "red",
					width: 0,
					curveness: 0.2
				}
			},
			data: convertData3(item[1])
		},
		{
			type: 'lines',
			zlevel: 2,
			effect: {
				show: true,
				period: 6,
				trailLength: 0
				
			},
			lineStyle: {
				normal: {
					color: "red",
					width: 1,
					opacity: 0.7,
					curveness: 0.2
				}
			},
			data: convertData3(item[1])
		},
		{
			type: 'effectScatter',
			coordinateSystem: 'geo',
			zlevel: 2,
			rippleEffect: {
				brushType: 'stroke'
			},
			label: {
				normal: {
					show: true,
					position: 'right',
					formatter: '{b}'
				}
			},
			symbol:'triangle',
			symbolSize: function (val) {
				return val[2] / 8;
			},
			itemStyle: {
				normal: {
					color: "#743A3A"
				}
			},
			data: item[1].map(function (dataItem) {
				return {
					name: dataItem[1].name,
					value: geoCoordMap3[dataItem[1].name].concat([dataItem[1].value])
				};
			})
		});
		
	});
	[['广州', GZData4]].forEach(function (item, i) {
		series.push(
		{
			type: 'lines',
			zlevel: 1,
			effect: {
				show: true,
				period: 6,
				trailLength: 0.9,
				color: 'blue',
				symbolSize: 5
			},
			lineStyle: {
				normal: {
					color: "red",
					width: 0,
					curveness: 0.2
				}
			},
			data: convertData4(item[1])
		},
		{
			type: 'lines',
			zlevel: 2,
			effect: {
				show: true,
				period: 6,
				trailLength: 0
				
			},
			lineStyle: {
				normal: {
					color: "red",
					width: 1,
					opacity: 0.7,
					curveness: 0.2
				}
			},
			data: convertData4(item[1])
		},
		{
			type: 'effectScatter',
			coordinateSystem: 'geo',
			zlevel: 2,
			rippleEffect: {
				brushType: 'stroke'
			},
			label: {
				normal: {
					show: true,
					position: 'right',
					formatter: '{b}'
				}
			},
			symbol:'diamond',
			symbolSize: function (val) {
				return val[2] / 8;
			},
			itemStyle: {
				normal: {
					color: "#FF5809"
				}
			},
			data: item[1].map(function (dataItem) {
				return {
					name: dataItem[1].name,
					value: geoCoordMap4[dataItem[1].name].concat([dataItem[1].value])
				};
			})
		});
		
	});
	[['伦敦', GZData5]].forEach(function (item, i) {
		series.push(
		{
			type: 'lines',
			zlevel: 1,
			effect: {
				show: true,
				period: 6,
				trailLength: 0.9,
				color: 'blue',
				symbolSize: 5
			},
			lineStyle: {
				normal: {
					color: "red",
					width: 0,
					curveness: 0.2
				}
			},
			data: convertData5(item[1])
		},
		{
			type: 'lines',
			zlevel: 2,
			effect: {
				show: true,
				period: 6,
				trailLength: 0
				
			},
			lineStyle: {
				normal: {
					color: "red",
					width: 1,
					opacity: 0.7,
					curveness: 0.2
				}
			},
			data: convertData5(item[1])
		},
		{
			type: 'effectScatter',
			coordinateSystem: 'geo',
			zlevel: 2,
			rippleEffect: {
				brushType: 'stroke'
			},
			label: {
				normal: {
					show: true,
					position: 'right',
					formatter: '{b}'
				}
			},
			symbol:'pin',
			symbolSize: function (val) {
				return val[2] / 8;
			},
			itemStyle: {
				normal: {
					color: "#A5A552"
				}
			},
			data: item[1].map(function (dataItem) {
				return {
					name: dataItem[1].name,
					value: geoCoordMap5[dataItem[1].name].concat([dataItem[1].value])
				};
			})
		});
		
	});

	var option = {
		backgroundColor: '#fff',
	   
		geo: {
			map: 'world',
			label: {
				emphasis: {
					show: false
				}
			},
			zoom:1.25,
			roam: true,
			itemStyle: {
				normal: {
					areaColor: '#fff',
					borderColor: '#111'
				},
				emphasis: {
					areaColor: 'blue'
				}
			}
		},
		series : series
	};
	myChart.setOption(option);
*/
	//@模态框
	function modalInit(modalName)
	{
		var modalName = '#' + modalName;
		//设置模态框可移动
		$(modalName).draggable({   
			handle: ".modal-header",   
			cursor: 'move',   
			refreshPositions: false
		});
				
		//模态框居中显示
		function centerModals() {   
			$(modalName).each(function(i){  
				var $clone = $(this).clone().css('display', 'block').appendTo('body');
				//设置modal垂直居中
				var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);   
				top = top > 0 ? top : 0;   
				$(this).find('.modal-content').css("margin-top", top);
				$clone.remove();
			   
			});
		}
		//调用show方法时触发
		$(modalName).on('show.bs.modal', function(){
			centerModals();
			
		});
		$(window).on('resize', centerModals);  
	}
	function modalInit_maptip(modalName)
	{
		var modalName = '#' + modalName;
		//设置模态框可移动
		$(modalName).draggable({   
			handle: ".modal-header",   
			cursor: 'move',   
			refreshPositions: false
		});
				
		//模态框居中显示
		function centerModals() {   
			$(modalName).each(function(i){  
				var $clone = $(this).clone().css('display', 'block').appendTo('body');
				//设置modal垂直居中
				var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);   
				top = top > 0 ? top : 0;   
				$(this).find('.modal-content').css("margin-top", top);
				$clone.remove();
			   
			});
		}
		//调用show方法时触发
		$(modalName).on('show.bs.modal', function(){
			centerModals();
		});
		$(window).on('resize', centerModals);  
	}
		
	function switchStrToNum(arrStr)
	{
		var arr=[]
		for(var i=0;i<arrStr.length;i++)
		{
			arr[i]=parseFloat(arrStr[i]);
		}
		return arr;
	}

	var dataCenterArr=[];
	var dataCenter=[];
	$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/getallorganization"),function(data){
		$(data.data).each(function(index,item){
			dataCenterArr.push(
				{
				zzjg:item.zzjg,
				zcwz:switchStrToNum(item.zcwz.split(","))
				}
			);
			dataCenter.push(
				{
				zzjg:item.zzjg,
				zcwz:item.zcwz
				}
			);
		})
	});
	//console.log(dataCenterArr[0].zcwz);
	
	//@ little bug
	var geoCoordMap1 = {		
		"信息中心-网络安全管理中心":dataCenterArr[0].zcwz,		
		'伦敦': [-0.127758,51.507351]
	};
	var GZData1 = [
		[{name:'伦敦'},{name:dataCenterArr[0].zzjg,value:180}]
	];

	var convertData1 = function (data) {
		var res = [];
		for (var i = 0; i < data.length; i++) {
			var dataItem = data[i];
			var fromCoord = geoCoordMap1[dataItem[0].name];
			var toCoord = geoCoordMap1[dataItem[1].name];
			if (fromCoord && toCoord) {
				res.push({
					fromName: dataItem[0].name,
					toName: dataItem[1].name,
					coords: [fromCoord, toCoord]
				});
			}
		}
		return res;
	};

	var series = [];
	[['伦敦', GZData1]].forEach(function (item, i) {
		//console.log(convertData1(item[1]));
		series.push(
		{
			type: 'lines',
			zlevel: 1,
			effect: {
				show: true,
				period: 6,
				trailLength: 0.9,
				color: 'blue',
				symbolSize: 5
			},
			lineStyle: {
				normal: {
					color: "red",
					width: 0,
					curveness: 0.2
				}
			},
			data: convertData1(item[1])
		},
		{
			type: 'lines',
			zlevel: 2,
			effect: {
				show: true,
				period: 6,
				trailLength: 0
				
			},
			lineStyle: {
				normal: {
					color: "red",
					width: 1,
					opacity: 0.7,
					curveness: 0.2
				}
			},
			data: convertData1(item[1])
		},
		{
			type: 'effectScatter',
			coordinateSystem: 'geo',
			zlevel: 2,
			rippleEffect: {
				brushType: 'stroke'
			},
			label: {
				normal: {
					show: true,
					position: 'right',
					formatter: '{b}'
				}
			},
			symbol:'circle',
			symbolSize: function (val) {
				return val[2] / 8;
			},
			itemStyle: {
				normal: {
					color: "#BF0060"
				}
			},
			data: item[1].map(function (dataItem) {
				return {
					name: dataItem[1].name,
					value: geoCoordMap1[dataItem[1].name].concat([dataItem[1].value])
				};
			})
		});
		
	});

	var option = {
		backgroundColor: '#fff',
	   
		geo: {
			map: 'world',
			label: {
				emphasis: {
					show: false
				}
			},
			zoom:1.25,
			roam: true,
			itemStyle: {
				normal: {
					areaColor: '#fff',
					borderColor: '#111'
				},
				emphasis: {
					areaColor: 'blue'
				}
			}
		},
		series : series
	};
	myChart.setOption(option);

	function getzcType(arr)
	{
		var res=[];
		var resNew=[];
		
		for(var i=0;i<arr.length;i++)
		{
			res[i]=arr[i].zclx;
		}
		
		res.sort(); 
		var resNew=[res[0]]; 
		for(var i = 1; i < res.length; i++){ 
			if( res[i] !== resNew[resNew.length-1]){ 
				resNew.push(res[i]); 
			} 
		} 
		return resNew; 
	}

	function getzcdetailByType(typeStr,dealArr)
	{
		var res=[];
		var k=0;
		for(var i=0;i<dealArr.length;i++)
		{
			if(dealArr[i].zclx==typeStr)
			{
				res[k]=dealArr[i];
				k++;
			}
		}
		return res;
	}

	//@跳转到资产详情页
	function gotoZcpageByzcbh(zcid)
	{
		//alert(zcbh);
		window.open('../ljw/zcxq.html?id='+zcid);
	}

	myChart.on('mouseover', function (params) {
		// 控制台打印数据的名称
		if(params.name==dataCenterArr[0].zzjg)
		{
			$("#zcdetailId").empty();
			var zcdetail=[];
			var jsonmapObj={zzjg:dataCenter[0].zzjg,zcwz:dataCenter[0].zcwz};
			$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/getassetlist?param="+JSON.stringify(jsonmapObj)),function(data){
				$(data.data).each(function(index,item){
					//console.log(item);
					zcdetail.push({
						id:item.id,
						zcbh:item.zcbh,
						zclx:item.zclx,
						zcmc:item.zcmc
					})
				})
			});
			//console.log(getzcType(zcdetail));
			var zclxArr=getzcType(zcdetail);
			console.log(getzcdetailByType(zclxArr[0],zcdetail));
			for(var i=0;i<zclxArr.length;i++)
			{
				$("#zcdetailId").append("<ul id='"+i+"'>"+zclxArr[i]+":"+"&nbsp</ul><br>");
				var zcdetailtmp=getzcdetailByType(zclxArr[i],zcdetail);
				for(var j=0;j<zcdetailtmp.length;j++)
				{
					$("#"+i).append("<li><a href='#' onclick="+"gotoZcpageByzcbh('"+zcdetailtmp[j].id+"')>"+zcdetailtmp[j].zcmc+"</a><li>"+"&nbsp");
				}
				
			}
			modalInit("demoModal");
			$("#demoModal").modal('show');
			
		}
			
	});
	
	//@底部图
	realTimeX=[];
	realTimeX_tmp=[];
	realTimeY_value=[];
	realTimeY_value_tmp=[];
	//var now = new Date("2016/12/23 01:00:00");
	//@测试数据段，这里认为定义时间间隔
	var jsonRealObj={starttime:"2016-12-23 01:00:00",endtime:"2016-12-23 03:00:00"}; 
	$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/getdataflowintimewindow?param="+JSON.stringify(jsonRealObj)),function(data){
		$(data.data).each(function(index,item){
			realTimeX_tmp.push(item.sj);
			realTimeY_value_tmp.push(item.jll+item.cll);	
		})
		realTimeX=realTimeX_tmp;
		realTimeY_value=realTimeY_value_tmp;
		
		realTimeX_tmp=[];
		realTimeY_value_tmp=[];
	});
	function realData(shift) {
		//now=now.getMinutes()+3
		//data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);

		if (shift) {
			realTimeX.shift();
			realTimeY_value.shift();
		}

		//now = new Date(+new Date(now) + oneDay);
	}

	var options1 = {
		//color:"#ADADAD",
		tooltip : {
			trigger: 'axis',
			axisPointer : {            
				type : 'line'   
			}
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: realTimeX
		},
		yAxis: {
			boundaryGap: [0, '50%'],
			type: 'value'
			
		},
		grid: {
			top:'8%',
			left: '3%',
			right: '4%',
			bottom: '1%',
			containLabel: true
		},
		series: [
			{
				name:'实时流量',
				type:'line',
				smooth:true,
				symbol: 'none',
				stack: 'a',
				areaStyle: {
					normal: {}
				},
				data: realTimeY_value
			}
		]
	};
	

	setInterval(function () {
		realData(true);
		myCharts1.setOption({
			xAxis: {
				data: realTimeX
			},
			series: [{
				name:'实时流量',
				data: realTimeY_value
			}]
		});
	}, 500);

	myCharts1.setOption(options1);
/*	
	var base = +new Date(2014, 9, 3);
	var oneDay = 24 * 3600 * 1000;
	var date = [];

	var data = [Math.random() * 150];
	var now = new Date(base);

	function addData(shift) {
		now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
		date.push(now);
		data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);

		if (shift) {
			date.shift();
			data.shift();
		}

		now = new Date(+new Date(now) + oneDay);
	}

	for (var i = 1; i < 100; i++) {
		addData();
	}

	var options1 = {
		color:"#ADADAD",
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: date
		},
		yAxis: {
			boundaryGap: [0, '50%'],
			type: 'value'
			
		},
		grid: {
			top:'8%',
			left: '3%',
			right: '4%',
			bottom: '1%',
			containLabel: true
		},
		series: [
			{
				name:'实时流量',
				type:'line',
				smooth:true,
				symbol: 'none',
				stack: 'a',
				areaStyle: {
					normal: {}
				},
				data: data
			}
		]
	};

	setInterval(function () {
		addData(true);
		myCharts1.setOption({
			xAxis: {
				data: date
			},
			series: [{
				name:'实时流量',
				data: data
			}]
		});
	}, 500);

	myCharts1.setOption(options1);
*/
	
/*
    var options2 = {
		color: ['red'],
		tooltip : {
			trigger: 'axis',
			axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		grid: {
			top:'5%',
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis : [
			{
				type : 'category',
				data : ['1', '5', '10', '15', '20', '25', '30' ,'35' ,'40' ,'45' ,'50','55','60'],
				axisTick: {
					alignWithLabel: true
				}
			}
		],
		yAxis : [
			{
				type : 'value'
			}
		],
		 dataZoom: [
			{   // 这个dataZoom组件，默认控制x轴。
				type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
				start: 0,      
				end: 100
			}
		],
		series : [
			{
				name:'直接访问',
				type:'bar',
				barWidth: '60%',
				data:[10, 52, 200, 334, 390, 330, 220 ,78, 21, 90 ,214 ,46,210]
			}
		]
	};

	myCharts2.setOption(options2);
*/
/*
	var options21 = {
		color:"#ADADAD",	
		tooltip : {
			trigger: 'axis',
			axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		grid: {
			top:'5%',
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis : [
			{
				type : 'category',
				data : ['0点','1点','2点','3点','4点','5点','6点','7点','8点','9点','10点','11点','12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点']
			}
		],
		yAxis : [
			{
				type : 'value'
				
			}
		],
		series : [
			{
				name:'按小时统计',
				type:'bar',
				data:[320, 332, 301, 334, 390, 330, 320,120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210, 101, 134,123]
			},
		]
	};
	var options22 = {
		
		tooltip : {
			trigger: 'axis',
			axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		grid: {
			top:'5%',
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis : [
			{
				type : 'category',
				data : ['1号','2号','3号','4号','5号','6号','7号','8号','9号','10号','11号','12号','13号','14号','15号','16号','17号','18号','19号','20号','21号','22号','23号','24号','25号','26号','27号','28号','29号','30号']
			}
		],
		yAxis : [
			{
				type : 'value'
				
			}
		],
		series : [
			{
				name:'按天统计',
				type:'bar',
				data:[320, 332, 301, 334, 390, 330, 320,120, 132, 101, 134, 90, 230, 390, 330, 320,120, 132, 210,120, 132, 101, 134, 90, 230, 210, 101, 134, 90,43]
			},
			{
				name:'按月统计',
				type:'bar',
				data:[32, 32, 301, 334, 390, 330, 320,120, 132, 101, 134, 90, 230, 390, 330, 320,120, 132, 210,120, 132, 101, 134, 90, 230, 210, 101, 134, 90,43]
			}
		]
	};
	myCharts2.setOption(options21);
	function switchTime_1()
	{
		myCharts2.setOption(options21);
	}
	function switchTime_2()
	{
		myCharts2.setOption(options22);
	}
*/
		var barXtime=[];
		var barYvalue_ll=[];
		var barYvalue_package=[];
		var barXtime_tmp=[];
		var barYvalue_ll_tmp=[];
		var barYvalue_package_tmp=[];
		function switchTime_m()
		{
			var jsonBarmObj={starttime:"2016-12-23 01:00:00",endtime:"2016-12-23 08:00:00",countby:"minute"}; 
			$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/getdataflowstatistic?param="+JSON.stringify(jsonBarmObj)),function(data){
				$(data.data).each(function(index,item){
					barXtime_tmp.push(item.sj);
					barYvalue_ll_tmp.push(item.jll+item.cll);
					barYvalue_package_tmp.push(item.jbs+item.cbs);
				})
				barXtime=barXtime_tmp;
				barYvalue_ll=barYvalue_ll_tmp;
				barYvalue_package=barYvalue_package_tmp;
				
				barXtime_tmp=[];
				barYvalue_ll_tmp=[];
				barYvalue_package_tmp=[];
			});
			var options21 = {
				tooltip : {
					trigger: 'axis',
					axisPointer : {            // 坐标轴指示器，坐标轴触发有效
						type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					}
				},
			   
				grid: {
					top: '1%',
					left: '1%',
					right: '1%',
					bottom: '1%',
					containLabel: true
				},
				xAxis : [
					{
						type : 'category',
						data : barXtime
					}
				],
				yAxis : [
					{
						type : 'value'
					}
				],
				series : [
					{
						name:'按流量统计',
						type:'bar',
						data:barYvalue_ll
					},
					
					{
						name:'按数据包统计',
						type:'bar',
						data:barYvalue_package
					   
					}
					
				]
			};
			myCharts2.setOption(options21);
		}
		function switchTime_h()
		{
			var jsonBarhObj={starttime:"2016-12-23 01:00:00",endtime:"2016-12-23 08:00:00",countby:"hour"}; 
			$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/getdataflowstatistic?param="+JSON.stringify(jsonBarhObj)),function(data){
				$(data.data).each(function(index,item){
					barXtime_tmp.push(item.sj);
					barYvalue_ll_tmp.push(item.jll+item.cll);
					barYvalue_package_tmp.push(item.jbs+item.cbs);
				})
				barXtime=barXtime_tmp;
				barYvalue_ll=barYvalue_ll_tmp;
				barYvalue_package=barYvalue_package_tmp;
				
				barXtime_tmp=[];
				barYvalue_ll_tmp=[];
				barYvalue_package_tmp=[];
			});
			var options21 = {
				tooltip : {
					trigger: 'axis',
					axisPointer : {            // 坐标轴指示器，坐标轴触发有效
						type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					}
				},
			   
				grid: {
					top: '1%',
					left: '1%',
					right: '1%',
					bottom: '1%',
					containLabel: true
				},
				xAxis : [
					{
						type : 'category',
						data : barXtime
					}
				],
				yAxis : [
					{
						type : 'value'
					}
				],
				series : [
					{
						name:'按流量统计',
						type:'bar',
						data:barYvalue_ll
					},
					
					{
						name:'按数据包统计',
						type:'bar',
						data:barYvalue_package
					   
					}
					
				]
			};
			myCharts2.setOption(options21);
		}
		function switchTime_w()
		{
			var jsonBarwObj={starttime:"2016-12-01 00:00:00",endtime:"2016-12-30 00:00:00",countby:"week"}; 
			$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/getdataflowstatistic?param="+JSON.stringify(jsonBarwObj)),function(data){
				$(data.data).each(function(index,item){
					barXtime_tmp.push(item.sj);
					barYvalue_ll_tmp.push(item.jll+item.cll);
					barYvalue_package_tmp.push(item.jbs+item.cbs);
				})
				barXtime=barXtime_tmp;
				barYvalue_ll=barYvalue_ll_tmp;
				barYvalue_package=barYvalue_package_tmp;
				
				barXtime_tmp=[];
				barYvalue_ll_tmp=[];
				barYvalue_package_tmp=[];
			});
			var options21 = {
				tooltip : {
					trigger: 'axis',
					axisPointer : {            // 坐标轴指示器，坐标轴触发有效
						type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					}
				},
			   
				grid: {
					top: '1%',
					left: '1%',
					right: '1%',
					bottom: '1%',
					containLabel: true
				},
				xAxis : [
					{
						type : 'category',
						data : barXtime
					}
				],
				yAxis : [
					{
						type : 'value'
					}
				],
				series : [
					{
						name:'按流量统计',
						type:'bar',
						data:barYvalue_ll
					},
					
					{
						name:'按数据包统计',
						type:'bar',
						data:barYvalue_package
					   
					}
					
				]
			};
			myCharts2.setOption(options21);
		}
		function switchTime_M()
		{
			var jsonBarMObj={starttime:"2016-12-01 00:00:00",endtime:"2016-12-30 00:00:00",countby:"month"}; 
			$.get(encodeURI("http://"+global_ip+"/networkassetinfocon/getdataflowstatistic?param="+JSON.stringify(jsonBarMObj)),function(data){
				$(data.data).each(function(index,item){
					barXtime_tmp.push(item.sj);
					barYvalue_ll_tmp.push(item.jll+item.cll);
					barYvalue_package_tmp.push(item.jbs+item.cbs);
				})
				barXtime=barXtime_tmp;
				barYvalue_ll=barYvalue_ll_tmp;
				barYvalue_package=barYvalue_package_tmp;
				
				barXtime_tmp=[];
				barYvalue_ll_tmp=[];
				barYvalue_package_tmp=[];
			});
			var options21 = {
				tooltip : {
					trigger: 'axis',
					axisPointer : {            // 坐标轴指示器，坐标轴触发有效
						type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					}
				},
			   
				grid: {
					top: '1%',
					left: '1%',
					right: '1%',
					bottom: '1%',
					containLabel: true
				},
				xAxis : [
					{
						type : 'category',
						data : barXtime
					}
				],
				yAxis : [
					{
						type : 'value'
					}
				],
				series : [
					{
						name:'按流量统计',
						type:'bar',
						data:barYvalue_ll
					},
					
					{
						name:'按数据包统计',
						type:'bar',
						data:barYvalue_package
					   
					}
					
				]
			};
			myCharts2.setOption(options21);
		}
		var val=$('input:radio[name="mytime"]:checked').val();
		if(val=="1")
			switchTime_m();
		else if(val=="2")
			switchTime_h();
		else if(val=="3")
			switchTime_w();
		else
			switchTime_M();
		
</script>